<template>
  <div class="box">
    <div class="Message">
      <div class="Message_left"></div>
      <div class="Message_cen">
        <div class="cen_left">
          <div class="left_con">
            张 三
            <div class="vip_ic"></div>
          </div>
          <div class="left_con">ID:66666666</div>
        </div>
        <div class="cen_right">
          <div class="codeImg"></div>
        </div>
      </div>
    </div>
    <div class="Message">
      <div
        v-for="(item, index) in typeArr"
        :key="index"
        :class="[SelectType == item.val ? 'Select' : 'Unchecked']"
        @click="handelSelectType(item.val)"
      >
        {{ item.Instructions }}
      </div>
    </div>
    <div class="Message">
      <div class="Centre_btn" @click="handelCenter">个人中心</div>
      <div class="quit_btn" @click="handelQuit">退出</div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      SelectType: "1",
      typeArr: [
        { Instructions: "完善简历", val: "1" },
        { Instructions: "我的收藏", val: "2" },
        { Instructions: "账号与安全中心", val: "3" },
        { Instructions: "我的钱包", val: "4" },
      ],
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {
    handelSelectType(num) {
      this.SelectType = num;
    },
    // 退出按钮
    handelQuit(){
      this.$router.push("/login");
    },
    // 跳转个人中心
    handelCenter(){
      this.$router.push("/Centre");
    },
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  .Message {
    width: 94%;
    height: 33%;
    margin-left: 2%;
    display: flex;
    flex-wrap: wrap;
    .Message_left {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: auto;
      margin-left: 5%;
      background-image: url("../../../../assets/imgs/avatarimg.jpg");
      background-size: 100% 100%;
    }
    .Message_cen {
      flex: 1;
      height: 100%;
      display: flex;
      .cen_left {
        width: 55%;
        height: 66px;
        margin: auto;
        margin-left: 10px;
        font-size: 16px;
        font-weight: 600;
        .left_con {
          width: 100%;
          height: 33px;
          line-height: 33px;
          display: flex;
          .vip_ic {
            width: 22px;
            height: 28px;
            margin-left: 15px;
            background-image: url("../../../../assets/imgs/vimg.webp");
            background-size: 100% 100%;
          }
        }
      }
      .cen_right {
        flex: 1;
        height: 100%;
        display: flex;
        .codeImg {
          width: 80px;
          height: 80px;
          background-image: url("../../../../assets/imgs//codeimg.png");
          background-size: 100% 100%;
          margin: auto;
        }
      }
    }
    .Select {
      width: 40%;
      min-height: 35px;
      line-height: 35px;
      border: 2px solid #9cc7f0;
      margin: auto;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      background-color: #e9f3ff;
      cursor: pointer;
    }
    .Unchecked {
      width: 40%;
      min-height: 35px;
      line-height: 35px;
      border: 2px solid #e9e9e9;
      margin: auto;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .Centre_btn {
      width: 90%;
      height: 30px;
      margin: auto;
      background-color: #3894ff;
      border-radius: 5px;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      font-weight: 600;
      cursor: pointer;
    }
    .quit_btn {
      width: 90%;
      height: 30px;
      margin: 0 auto;
      background-color: #cecece;
      border-radius: 5px;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      font-weight: 600;
      cursor: pointer;
    }
  }
}
</style>
